<template>
  <el-container>
    <el-header class="sa-header">
      <!--      <el-tabs class="sa-tabs" v-model="filterParams.data.audit" @tab-change="getData()">-->
      <!--        <el-tab-pane-->
      <!--          v-for="(item,index) in statusList"-->
      <!--          :key="index"-->
      <!--          :label="item.name"-->
      <!--          :name="item.type"-->
      <!--        ></el-tab-pane>-->
      <!--      </el-tabs>-->
      <div class="sa-title sa-flex sa-row-between">
        <div class="label sa-flex">
          <span class="left">行业资质审核</span>
          <!--          <search-condition-->
          <!--            :conditionLabel="filterParams.conditionLabel"-->
          <!--            @deleteFilter="deleteFilter"-->
          <!--          ></search-condition>-->
        </div>
        <div>
          <el-button
            class="sa-button-refresh"
            icon="RefreshRight"
            @click="getData()"
          ></el-button>
          <!--          <el-button class="sa-button-refresh" icon="Search" @click="openFilter"></el-button>-->
        </div>
      </div>
    </el-header>
    <el-main class="sa-p-0" v-loading="table.loading">
      <el-table class="sa-table" height="100%" :data="table.data" stripe>
        <template #empty>
          <sa-empty />
        </template>
        <el-table-column sortable="custom" prop="id" label="ID" min-width="80" />
        <el-table-column prop="store.name" label="商家角色名称" min-width="120" align="center" show-overflow-tooltip />
        <el-table-column prop="store.type_text" label="商家角色" min-width="100" align="center" />
        <el-table-column prop="category.type_text" label="类目类型" min-width="100" align="center" />
        <el-table-column prop="category_text" label="申请类目" min-width="200" align="center"
                         show-overflow-tooltip></el-table-column>
        <el-table-column label="营业执照" min-width="180" align="center">
          <template #default="scope">
            <div class="sa-flex sa-row-center sa-col-center">
              <sa-image :url="scope.row.business_license" size="80" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="申请资质" min-width="200" align="center">
          <template #default="scope">
            <div style="display: flex;justify-content: flex-start;overflow-y: scroll" v-if="scope.row.industry_qualification">
              <div v-for="(item,index) in scope.row.industry_qualification.split(',')" :key="index" class="sa-m-r-10">
                <sa-preview :url="item" size="80"></sa-preview>
              </div>
            </div>
<!--            <sa-preview :url="scope.row.industry_qualification" size="80"></sa-preview>-->
          </template>
        </el-table-column>
        <el-table-column label="驳回原因" min-width="150" align="center" show-overflow-tooltip >
          <template #default="scope">
            <div>{{ scope.row.remarks || '-'}}</div>
          </template>
        </el-table-column>
        <el-table-column label="审核状态" min-width="220" align="center">
          <template #default="scope">
            <div v-if="scope.row.audit_status === 'normal'" style="color: #04C775">审核通过</div>
            <div v-if="scope.row.audit_status === 'apply'" style="color: #E6A23C">待审核</div>
            <div v-if="scope.row.audit_status === 'reject'" style="color: #FA5151">审核驳回</div>
            <div v-if="scope.row.audit_status === 'disabled'" style="color: #FA5151">禁用</div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="120">
          <template #default="scope">
            <el-button
              class="is-link"
              type="primary"
              @click="audit(scope.row)"
              v-if="scope.row.audit_status === 'apply'"
            >审核
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <sa-view-bar>
      <template #right>
        <sa-pagination :pageData="pageData" @updateFn="getData" />
      </template>
    </sa-view-bar>
  </el-container>
</template>


<script setup>
  import { onMounted, reactive } from 'vue';
  import { api } from './industry.service';
  import { usePagination, useModal } from '@/sheep/hooks';
  import { useSearch } from '@/sheep/components/sa-table/sa-search/useSearch';
  import { composeFilter } from '@/sheep/utils';
  import { useRoute } from 'vue-router';
  import _ from 'lodash';
  import auditDetails from './audit.vue'

  const statusList = [
    { name: '全部', type: 'all' },
    { name: '待审核', type: '0' },
    { name: '审核通过', type: '1' },
    { name: '审核驳回', type: '2' }];

  const route = useRoute();
  const emit = defineEmits(['modalCallBack']);

  const table = reactive({
    loading: false,
    data: [],
  });

  const { pageData } = usePagination();


  onMounted(() => {
    getData();
  });


  const audit = (item) => {
    useModal(
      auditDetails,
      {
        title: '审核',
        id: item.id,
      },
      {
        confirm: () => {
          getData();
        },
      },
    );
  }

  const getData = async (page) => {
    table.loading = true;
    if (page) pageData.page = page;
    const { error, data } = await api.list({
      page: pageData.page,
      list_rows: pageData.list_rows,
    });
    table.loading = false;
    if (error === 0) {
      table.data = data.data;
      pageData.page = data.current_page;
      pageData.list_rows = data.per_page;
      pageData.total = data.total;
    }
  };
</script>
<style>
  .success {
    color: #67C23A;
  }

  .fail {
    color: #FA5151;
  }

  .ing {
    color: #FFC300;
  }
</style>